<template>
	<view>

		<cu-custom bgColor="#fff" :isBack="true" textColor="#000000">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">个人资料</block>
		</cu-custom>

		<view style="background-color: #FFFFFF; padding-bottom: 140rpx;">
			<template v-if="userSfzInfo.sfzId != null">
				<uni-list-item title="头像">
					<view class="flex align-center" slot="right">
						<view v-if="!userSfzInfo.wxpicImg">
							<view style="width: 100rpx; height: 100rpx;" class="title-img">
								<image src="/static/tabbar/me_avatar.png" class="rounded-circle title-avatar">
								</image>
							</view>
						</view>
						<view v-else>
							<image :src="userSfzInfo.wxpicImg" style="width: 100rpx; height: 100rpx;"
								class="rounded-circle">
							</image>
						</view>

					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="微信昵称">
					<view class="flex align-center" slot="right">
						<view class="flex align-center" slot="right">
							<span class="uni-input text-right mr-1">{{userSfzInfo.wxName}}</span>
						</view>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="手机号">
					<view class="flex align-center" slot="right">
						<span class="uni-input text-right mr-1">{{userSfzInfo.phonenum}}</span>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="姓名">
					<view class="flex align-center mr-1" slot="right">
						<!-- <input class="uni-input text-right"
						 placeholder="请输入姓名" placeholder-class="input-placehoder"
							v-model="userSfzInfo.sfzName" v-if="!userSfzInfo.sfzName" /> -->
						<input class="uni-input text-right"
								 placeholder="请输入姓名" placeholder-class="input-placehoder"
									v-model="userSfzInfo.sfzName" />
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="性别" @click="changeSex">
					<view class="flex align-center" slot="right">
						<text v-if="userSfzInfo.sfzSex == null"></text>
						<text v-else>{{sexText}}</text>
						<text class="iconfont icon-jinrujiantou "></text>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="民族">
					<view class="flex align-center" slot="right">
						<picker @change="changeMinzu" :value="backinfoMinzu" :range="minzuList" range-key="name">
							<text>{{ minzuList[backinfoMinzu].name }}</text>
							<text class="iconfont icon-jinrujiantou "></text>
						</picker>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<picker mode="date" :value="userSfzInfo.sfzBirthday" @change="onDateChange">
					<uni-list-item title="生日">
						<view class="flex align-center" slot="right">
							<text v-if="userSfzInfo.sfzBirthday == null" class="input-placehoder">请选择出生日期</text>
							<text v-else>{{userSfzInfo.sfzBirthday}}</text>
							<text class="iconfont icon-jinrujiantou "></text>
						</view>
					</uni-list-item>
				</picker>
				<view class="itemline"></view>
				<uni-list-item title="家庭住址" @click="showCityPicker">
					<view class="flex align-center" slot="right">
						<text v-if="!userSfzInfo.zhuzhi " class="input-placehoder">请选择家庭住址</text>
						<text v-else>{{userSfzInfo.zhuzhi}}</text>
						<text class="iconfont icon-jinrujiantou "></text>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="就业状态">
					<view class="flex align-center" slot="right">
						<picker @change="changeJiuYeState" :value="backinfoJiuye" :range="jiuyeList" range-key="name">
							<text v-if="!jiuyeList[backinfoJiuye].name" class="input-placehoder">请选就业状态</text>
							<text v-else>{{ jiuyeList[backinfoJiuye].name }}</text>
							<text class="iconfont icon-jinrujiantou "></text>
						</picker>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="职业">
					<view class="flex align-center" slot="right">
						<picker @change="changeZhiye" :value="backinfoZhiye" :range="zhiyeList" range-key="name">
							<text v-if="!zhiyeList[backinfoZhiye].name" class="input-placehoder">请选就业状态</text>
							<text v-else>{{ zhiyeList[backinfoZhiye].name }}</text>
							<text class="iconfont icon-jinrujiantou "></text>
						</picker>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="身份证号">
					<view class="flex align-center mr-1" slot="right">
						<!-- <input class="uni-input text-right"
						 placeholder="请输入身份证号" placeholder-class="input-placehoder"
							v-model="userSfzInfo.sfzNo" v-if="!userSfzInfo.sfzNo" /> -->
						<input class="uni-input text-right" placeholder="请输入身份证号" v-model="userSfzInfo.sfzNo"
							placeholder-class="input-placehoder"/>
					</view>
				</uni-list-item>
				<view class="py-2 px-2 finished">
					<button class="text-white"
						style="border-radius: 20rpx; border: 0;background-color: #3694EF;width: 80%;" type="primary"
						@click="submit">
						完成</button>
				</view>
				<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker"
					:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
			</template>

			<template v-if="userStudentInfo.studentId != null">
				<uni-list-item title="头像">
					<view class="flex align-center" slot="right">
						<image :src="userStudentInfo.wxpicImg" style="width: 120rpx; height: 120rpx;"
							class="rounded-circle">
						</image>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="微信昵称">
					<view class="flex align-center" slot="right">
						<view class="flex align-center" slot="right">
							<span class="uni-input text-right">{{userStudentInfo.wxName}}</span>
						</view>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="姓名">
					<view class="flex align-center" slot="right">
						<view class="flex align-center" slot="right">
							<span class="uni-input text-right">{{userStudentInfo.name}}</span>
						</view>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="电话">
					<view class="flex align-center" slot="right">
						<view class="flex align-center" slot="right">
							<span class="uni-input text-right">{{userStudentInfo.phone}}</span>
						</view>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="性别">
					<view class="flex align-center" slot="right">
						<view class="flex align-center" slot="right">
							<span class="uni-input text-right">{{userStudentInfo.gender}}</span>
						</view>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="民族">
					<view class="flex align-center" slot="right">
						<view class="flex align-center" slot="right">
							<span class="uni-input text-right">{{userStudentInfo.nation}}</span>
						</view>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="出生日期">
					<view class="flex align-center" slot="right">
						<view class="flex align-center" slot="right">
							<span class="uni-input text-right">{{userStudentInfo.birthday}}</span>
						</view>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="身份证号">
					<view class="flex align-center" slot="right">
						<view class="flex align-center" slot="right">
							<span class="uni-input text-right">{{userStudentInfo.idcard}}</span>
						</view>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="学历">
					<view class="flex align-center" slot="right">
						<view class="flex align-center" slot="right">
							<span class="uni-input text-right">{{userStudentInfo.education}}</span>
						</view>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
				<uni-list-item title="地址">
					<view class="flex align-center" slot="right">
						<view class="flex align-center" slot="right">
							<span
								class="uni-input text-right">{{userStudentInfo.statename}}-{{userStudentInfo.cityname}}-{{userStudentInfo.townname}}-{{userStudentInfo.villagename}}</span>
						</view>
					</view>
				</uni-list-item>
				<view class="itemline"></view>
			</template>
		</view>
	</view>
</template>
<script>
	import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue';
	import mpvueCityPicker from '@/components/uni-ui/mpvue-citypicker/mpvueCityPicker.vue';

	import minzuData from '../../packageC/pages/news_detail/minzudata.js';
	import zhiyeData from './zhiyedata.js';
	import jiuyeData from './jiuyedata.js';
	const sexArray = ['男', '女', '保密'];
	const app = getApp();
	export default {
		components: {
			uniListItem,
			mpvueCityPicker
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: app.globalData.theme.backgroundColor, //全局颜色变量

				cityPickerValueDefault: [28, 0, 0], //区域默认选项
				themeColor: '#007AFF',
				minzuList: minzuData,
				backinfoMinzu: 0,
				zhiyeList: zhiyeData,
				backinfoZhiye: 9,
				jiuyeList: jiuyeData,
				backinfoJiuye: 5,
				birthday: "",
				userSfzInfo: {
					backinfoSex: 2,
					sfzMinzu: "汉族",
					jiuyeState: "灵活就业",
					shenfen: "自由职业者",
					zhuzhi: "",
					sfzSex: 2,
				},
				userStudentInfo: {},
			}
		},
		// 监听返回
		onBackPress() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel();
				return true;
			}
		},
		// 监听页面卸载
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel();
			}
		},
		computed: {
			sexText() {
				return sexArray[this.userSfzInfo.sfzSex]
			},
		},
		onLoad(option) {
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				if (app.globalData.userinfo.studentId != null && app.globalData.userinfo.studentId != "" && app.globalData
					.userinfo.studentId != undefined) {
					uni.request({
						url: app.globalData.serve_system_url + 'getStudentInfo',
						method: 'GET',
						data: {
							studentId: app.globalData.userinfo.studentId
						},
						success: res => {
							this.userStudentInfo = res.data.data;
						},
					});
				} else if (app.globalData.userinfo.userId != null && app.globalData.userinfo.userId != "" && app.globalData
					.userinfo.userId != undefined) {
					uni.request({
						url: app.globalData.serve_system_url + 'getDataSfzInfo',
						method: 'GET',
						data: {
							sfzId: app.globalData.userinfo.userId
						},
						success: res => {
							this.userSfzInfo = res.data.data;
							if (res.data.data.zhuzhi == null) {
								this.userSfzInfo.zhuzhi = "";
							}
							if (res.data.data.sfzName == null ||res.data.data.sfzName  === "" || res.data.data.sfzName == "null") {
								this.userSfzInfo.sfzName = "";
							}
							if (res.data.data.sfzNo == null ||res.data.data.sfzNo === "" ||res.data.data.sfzNo == "null") {
								this.userSfzInfo.sfzNo = "";
							}
							if (this.userSfzInfo.jiuyeState == "" || this.userSfzInfo.jiuyeState == null ||
								this.userSfzInfo.jiuyeState == undefined) {
								this.backinfoJiuye = 5;
								this.userSfzInfo.jiuyeState = this.jiuyeList[this.backinfoJiuye].name;
							} else {
								this.backinfoJiuye = this.search(this.jiuyeList, this.userSfzInfo.jiuyeState);
								this.userSfzInfo.jiuyeState = this.jiuyeList[this.backinfoJiuye].name;

							}
							if (this.userSfzInfo.shenfen == "" || this.userSfzInfo.shenfen == null || this
								.userSfzInfo.shenfen == undefined) {
								this.backinfoZhiye = 9;
								this.userSfzInfo.shenfen = this.zhiyeList[this.backinfoZhiye].name;
							} else {
								this.backinfoZhiye = this.search(this.zhiyeList, this.userSfzInfo.shenfen);
								this.userSfzInfo.shenfen = this.zhiyeList[this.backinfoZhiye].name;
							}
							if (this.userSfzInfo.sfzMinzu == "" || this.userSfzInfo.sfzMinzu == null || this
								.userSfzInfo.sfzMinzu == undefined) {
								this.backinfoMinzu = 0;
								this.userSfzInfo.sfzMinzu = this.minzuList[this.backinfoMinzu].name;
							} else {
								this.backinfoMinzu = this.search(this.minzuList, this.userSfzInfo.sfzMinzu);
								this.userSfzInfo.sfzMinzu = this.minzuList[this.backinfoMinzu].name;
							}
						},
					});
				} else {
					uni.showModal({
						title: "登录提示",
						content: "请登录后，继续观看课程",
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '../login/login'
								});
							} else if (res.cancel) {}
						}
					});
				}
			},
			// 根据值，获得此值在数组的下标
			search(array, target) {
				for (var i = 0; i < array.length; i++) {
					if (array[i].name == target) {
						return i;
					}
				}
				return -1;
			},
			// 地址
			showCityPicker() {
				this.$refs.mpvueCityPicker.show();
			},
			// 三级联动的提交事件
			onConfirm(e) {
				this.userSfzInfo.zhuzhi = e.label;
			},
			// 修改生日
			onDateChange(e) {
				this.userSfzInfo.sfzBirthday = e.detail.value;
			},
			// 修改性别
			changeSex() {
				uni.showActionSheet({
					itemList: sexArray,
					success: (res) => {
						this.userSfzInfo.sfzSex = res.tapIndex;
					}

				});

			},
			// 民族
			changeMinzu: function(e) {
				this.backinfoMinzu = e.detail.value;
				this.userSfzInfo.sfzMinzu = this.minzuList[this.backinfoMinzu].name;
			},
			// 职业
			changeZhiye: function(e) {
				this.backinfoZhiye = e.detail.value;
				this.userSfzInfo.shenfen = this.zhiyeList[this.backinfoZhiye].name;
			},
			// 就业状态
			changeJiuYeState: function(e) {
				this.backinfoJiuye = e.detail.value;
				this.userSfzInfo.jiuyeState = this.jiuyeList[this.backinfoJiuye].name;
			},
			submit() {
				let userSfzInfo3 = {
					sfzName: this.userSfzInfo.sfzName,
					sfzMinzu: this.userSfzInfo.sfzMinzu,
					jiuyeState: this.userSfzInfo.jiuyeState,
					shenfen: this.userSfzInfo.shenfen,
					sfzNo: this.userSfzInfo.sfzNo,
				}
				let wanshanData = {};
				if (this.userSfzInfo.sfzDatatype == "1") {
					wanshanData = userSfzInfo3;
				}
				wanshanData.sfzId = this.userSfzInfo.sfzId;
				wanshanData.zhuzhi = this.userSfzInfo.zhuzhi;
				wanshanData.sfzSex = this.userSfzInfo.sfzSex;
				wanshanData.sfzBirthday = this.userSfzInfo.sfzBirthday;
				uni.request({
					url: app.globalData.serve_system_url + 'updateDataSfz',
					method: 'GET',
					data: wanshanData,
					success: res => {
						if (res.data.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '资料完善成功！'
							});
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 1500);
						} else {
							uni.showToast({
								icon: 'none',
								title: '资料完善失败！'
							});
						}
					},
					fail: () => {
						uni.showToast({
							icon: 'none',
							title: '网络错误'
						});
					},
				});
			}
		}
	}
</script>
<style>
	page {
		position: relative;
		background-color: #fff;
	}

	.input-placehoder {
		color: #3694EF;
	}

	.itemline {
		height: 2rpx;
		background-color: #F3F4F5;
		width: 95%;
		margin: 0 auto;
	}

	.mr-1 {
		margin-right: 30rpx;
	}

	.title-img {
		background-color: #9BCBFF;
		border: 3px solid #fff;
		border-radius: 50%;
		float: left;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title-avatar {
		height: 70rpx;
		width: 70rpx;
	}

	.finished {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: calc(env(safe-area-inset-bottom) + 120rpx);;
		background-color: #FDFDFD;
		border-top: 2rpx soild #F6F6F6;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;
	}
</style>